<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
     <!--2023-1-12：第一遍理解记忆-->
    <!--盒模型（盒子模型/框模型）(box model)
1、布局：CSS将页面中所有元素都设置为矩形的盒子，将元素设置为矩形的盒子后，
对页面的布局就成了将不同的盒子摆放到不同的位置
2、组成：内容区(content)+内边距(padding)+边框(border)+外边距(margin)-->
    <style>
        .box1{
/*3、内容区(content)
（1）范围：元素中所有子元素和文本内容都在内容区中排列；
（2）属性：内容区大小由width和height两个属性来设置*/
            width:200px;
            height:200px;
            background-color: aqua;

/*4、边框(border)*/
/*（1）范围：盒子边缘，边框里属于盒子内部，边框外属于盒子外部；大小会影响整个盒子大小*/
/*（2）属性：边框宽度(border-width/border-xxx-width):默认值是3px，指定四个方向的边框宽度；
值的情况：四个值：上右下左（顺时针）、三个值：上 左右 下、两个值：上下 左右、一个值：上右下左都一样；
border-xxx-width：单独指定某一个边的宽度*/
            border-width:20px;
            border-top-width:30px;
/*（3）属性：边框颜色(border-color)：默认值是color的颜色,指定四个边的边框颜色；上右下左*/
            border-color:chartreuse;
/*（4）属性：边框样式(border-style)：默认值是none,指定四个方向边框样式；
值的情况：solid表示实线、dotted表示点状虚线、dashed表示虚线、double表示双线*/
            border-style:dashed;
/*（5）简写属性：设置边框所有样式，没有顺序要求;border-xxx(top bottom left right)*/
            border:10px solid red;
            /* border-right:none; */

/*5、内边距(padding)：
（1）范围：内容区和边框之间的距离；内边距的设置会影响盒子大小
（2）四个方向：padding-top、padding-right、padding-bottom、padding-left
（3）注意：背景颜色会延伸到内边距上
（4）简写属性：padding是内边距的简写属性，可以同时指定四个方向的内边距，规则和biorder-width一样*/
            padding-top:100px;
            padding-right:100px;
            padding-bottom:100px;
            padding-left:100px;

/*6、外边距(margin)：
（1）范围：不会影响盒子可见框大小，但会影响盒子的位置，影响盒子实际占用空间大小
（2）四个方向：负值-元素会往相反方向移动
margin-top 上外边距，设置一个正值，元素向下移动
margin-right 右外边距，设置一个正值，其右边的元素会向右移动
margin-bottom 下外边距，设置正值，其下边的元素会向下移动
margin-left 左外边距，设置一个正值，元素向右移动
（3）排列：元素在页面中按照自左向右的顺序排列，所以默认情况下，设置左上元素会移动自己，设置下右会移动其他元素      
（4）简写属性：四个方向外边距：上右下左*/
        margin:100px;
        }
/*7、盒子可见框的大小：由内容区、内边距和边框共同决定，需要将3者加起来计算*/

        .inner{
            width:100%;
            height:100%;
            background-color: darkorange;
            }

    </style>
</head>
<body>
    <div class="box1">
        <div class="inner">内容区</div>
    </div>
    
</body>
</html>